<template>
	<view class="page">
		<view class="head-info">
			<!-- 搜索 -->
			<view class="head-search">
				<view class="icon-info" @click="onCode">
					<text class="iconfont icon-saoyisao"></text>
					<!-- <image src="/static/xiaoxi_ico.png" mode=""></image> -->
				</view>
				<view class="search" @click="onSearch">
					<view class="icon">
						<image src="/static/fdj_ico.png" mode=""></image>
					</view>
					<view class="hint">
						<text class="max">搜索</text>
						<text class="min">热门内容</text>
					</view>
				</view>
				<view class="icon-info" @click="onSkip('paycode')">
					<text class="iconfont icon-fukuanma"></text>
					<!-- <image src="/static/fkm_ico.png" mode=""></image> -->
				</view>
			</view>
			<!-- 分类列表 -->
			<view class="classify-list">
				<view class="list" v-for="(item,index) in classList" :class="{'action':classifyShow==index}" @click="onClassify(item,index)"
				 :key="index">
					<text>{{item.name}}</text>
					<text class="line" v-show="classifyShow==index"></text>
				</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :top="0">
			<view class="main" v-show="classifyShow===0">
				<template v-if="newsitems.length > 0">
					<block v-for="(list, listIndex) in newsitems" :key="listIndex">
						<!-- banner -->
						<swiper-image v-if="list.type === 'swiper'" :resdata="list.data" />
						<!-- 菜单导航 -->
						<template v-else-if="list.type === 'indexnavs'">
							<index-nav :resdata="list.data" />
						</template>
					</block>
					<!-- 通知 -->
					<view class="inform">
						<view class="inform-info">
							<view class="picture">
								<image src="/static/gg_ico.png" mode=""></image>
							</view>
							<view class="info">
								<swiper class="swiper" :circular="true" :vertical="true" :indicator-dots="false" :autoplay="true" :interval="3000"
								 :duration="1000">
									<swiper-item>
										<view class="swiper-item" @click="onSkip('inform')">
											<text class="one-omit">何*** 理刚刚通过推广赚了￥25.00元，商品男装休闲装购买</text>
										</view>
									</swiper-item>
									<swiper-item>
										<view class="swiper-item" @click="onSkip('inform')">
											<text class="one-omit">张*** 理刚刚通过推广赚了￥99.00元，商品Mac book pro 15寸购买</text>
										</view>
									</swiper-item>
									<swiper-item>
										<view class="swiper-item" @click="onSkip('inform')">
											<text class="one-omit">郑*** 理刚刚通过推广赚了￥88.00元，商品华为meat30 pro购买</text>
										</view>
									</swiper-item>
								</swiper>
							</view>
						</view>
					</view>
					<!-- 限时抢购，好货精选 -->
					<view class="flash-good">
						<!-- 左边 -->
						<view class="flash-sale">
							<view class="line"></view>
							<view class="flash-title" @click="onSkip('flash')">
								<view class="pictrue">
									<image src="/static/xsqg_title.png" mode=""></image>
								</view>
								<view class="date-time">
									<text class="time">02</text>
									<text class="da">:</text>
									<text class="time">15</text>
									<text class="da">:</text>
									<text class="time">55</text>
								</view>
							</view>
							<view class="goods-list">
								<view class="list" @click="onSkip('goods')">
									<view class="pictrue">
										<image src="/static/img/goods_01.png"></image>
									</view>
									<view class="price">
										<text class="selling-price">￥59</text>
										<text class="original-price">￥999</text>
									</view>
								</view>
								<view class="list" @click="onSkip('goods')">
									<view class="pictrue">
										<image src="/static/img/goods_02.png"></image>
									</view>
									<view class="price">
										<text class="selling-price">￥59</text>
										<text class="original-price">￥999</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 右边 -->
						<view class="good-choice">
							<view class="goods-title" @click="onSkip('GoodChoice')">
								<view class="title">
									<text>好货精选</text>
								</view>
								<view class="describe">
									<text>全场</text>
									<text class="num">1</text>
									<text>折起</text>
								</view>
							</view>
							<view class="goods-list">
								<view class="list" @click="onSkip('goods')">
									<view class="pictrue">
										<image src="/static/img/goods_03.png"></image>
									</view>
									<view class="price">
										<text class="selling-price">￥59</text>
										<text class="original-price">￥999</text>
									</view>
								</view>
								<view class="list" @click="onSkip('goods')">
									<view class="pictrue">
										<image src="/static/img/goods_08.png"></image>
									</view>
									<view class="price">
										<text class="selling-price">￥59</text>
										<text class="original-price">￥999</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 今日上新 -->
					<view class="new-product">
						<view class="product-title">
							<view class="title">
								<image src="/static/hr_ico.png"></image>
								<text>今日上新</text>
							</view>
							<view class="describe">
								<text>今日上新商品是否有你心仪礼物</text>
							</view>
						</view>
						<view class="goods-list">
							<view class="list" @click="onSkip('goods')">
								<view class="pictrue">
									<image src="/static/img/goods_07.png"></image>
								</view>
								<view class="price" @click="onSkip('goods')">
									<text class="selling-price">￥59</text>
									<text class="original-price">￥19</text>
								</view>
							</view>
							<view class="list" @click="onSkip('goods')">
								<view class="pictrue">
									<image src="/static/img/goods_10.png"></image>
								</view>
								<view class="price">
									<text class="selling-price">￥399</text>
									<text class="original-price">￥299</text>
								</view>
							</view>
							<view class="list" @click="onSkip('goods')">
								<view class="pictrue">
									<image src="/static/img/goods_11.png"></image>
								</view>
								<view class="price">
									<text class="selling-price">￥3999</text>
									<text class="original-price">￥2999</text>
								</view>
							</view>
							<view class="list" @click="onSkip('goods')">
								<view class="pictrue">
									<image src="/static/img/goods_10.png"></image>
								</view>
								<view class="price">
									<text class="selling-price">￥599</text>
									<text class="original-price">￥199</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 为你推荐 -->
					<view class="recommend-info">
						<view class="recommend-title">
							<view class="title">
								<image src="/static/wntj_title.png" mode=""></image>
							</view>
						</view>
						<view class="goods-list">
							<view class="list" v-for="(item,index) in goodsList" @click="onSkip('goods', item)" :key="index">
								<view class="pictrue">
									<image :src="item.img" mode="heightFix"></image>
								</view>
								<view class="title-tag">
									<view class="tag">
										<text v-if="item.is_goods === 1">特价</text>
										{{item.name}}
									</view>
								</view>
								<view class="price-info">
									<view class="user-price">
										<text class="min">￥</text>
										<text class="max">{{item.price}}</text>
									</view>
									<view class="vip-price">
										<image src="/static/vip_ico.png"></image>
										<text>￥{{item.vip_price}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</mescroll-body>
		<ClassifyData v-show="classifyShow!=0"></ClassifyData>
		<!-- tabbar -->
		<TabBar :tabBarShow="0"></TabBar>
	</view>
</template>

<script>
	import swiperImage from "@/components/home/swiper-Image.vue"; //swiperImage组件
	import indexNav from "@/components/home/index-nav.vue"; //分类菜单组件

	import TabBar from '../../components/TabBar/TabBar.vue';
	import ClassifyData from '../../components/ClassifyData/ClassifyData.vue';
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			TabBar,
			ClassifyData,
			swiperImage,
			indexNav
		},
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					use: true
				},
				classList: [], //顶部导航分类
				newsitems: [], //首页数据
				goodsList: [],//首页商品
				classifyShow: 0,
				// 页面高度
				pageHeight: 500,
			}
		},
		onReady() {
			uni.hideTabBar();
			// #ifdef MP
			uni.setNavigationBarTitle({
				title: '首页',
			})
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#fe3b0f',
			})
			// #endif
		},
		onLoad() {
			this.sendRequest()
			this.sendgoodsList()
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			if (scrollTop > 0) {
				this.pageHeight = 210;
			} else {
				this.pageHeight = 500;
			}
		},
		onReachBottom(e) {

			console.log(12333);
		},
		methods: {
			// 请求首页各分类数据
			sendRequest: function() {
				this.$api.home_classify({
					noncestr: Date.now()
				}).then((res) => {
					console.log(res)
					let data = res.data[0]
					this.classList = data.category
					this.newsitems = data.data
					// console.log('request success', data)
					// console.log('request success', this.newsitems)
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			//首页商品
			sendgoodsList: function() {
				this.$api.recommend({
					noncestr: Date.now()
				}).then((res) => {
					// console.log('首页商品',res)
					this.$url(res.data, 'img')
					this.goodsList = res.data
					console.log(this.goodsList)
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.mescroll.endSuccess();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				console.log('上拉加载')
				setTimeout(() => {
					this.mescroll.endByPage(10, 20);
				}, 2000)
			},

			/**
			 * 搜索点击
			 */
			onSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			/**
			 * 扫一扫点击
			 */
			onCode() {
				// 只允许通过相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			/**
			 * 分类点击
			 * @param {Object} item
			 * @param {Number} index
			 */
			onClassify(item, index) {
				this.classifyShow = index;
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type, item) {
				switch (type) {
					case 'mess':
						uni.navigateTo({
							url: '/pages/Message/Message'
						})
						break;
					case 'paycode':
						uni.navigateTo({
							url: '/pages/PaymentCode/PaymentCode'
						})
						break;
					case 'inform':
						break;
					case 'flash':
						uni.navigateTo({
							url: '/pages/FlashSale/FlashSale'
						})
						break;
					case 'GoodChoice':
						uni.navigateTo({
							url: '/pages/GoodChoice/GoodChoice'
						})
						break;
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsDetails/GoodsDetails?item=' + encodeURIComponent(JSON.stringify(item)),
							animationType: 'zoom-fade-out',
							animationDuration: 200
						})
						break;
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	@import 'home.scss';
</style>
